<template>
    <div class="box">
        <!--        标题-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
                <i class="el-icon-s-goods"></i>商品列表
            </el-breadcrumb-item>
        </el-breadcrumb>
        <!--        搜索筛选-->
        <div class="title_xiao">商品筛选</div>
        <el-row class="search-box">
            <el-col :span="24">
                <el-form :model="formInline"  size="small" label-width="80px" class="search-form">
                    <el-form-item label="商品ID">
                        <el-input v-model="formInline.id" placeholder="请输入商品ID"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称">
                        <el-input v-model="formInline.name" placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商品状态">
                        <el-select v-model="formInline.state" placeholder="选择商品状态">
                            <el-option label="全部" value=" "></el-option>
                            <el-option label="销售" value="1"></el-option>
                            <el-option label="促销" value="2"></el-option>
                            <el-option label="售罄" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="供应商">
                        <el-select v-model="formInline.supplier_id" placeholder="选择供应商">
                            <el-option :label="item" :value="index+1" v-for="(item, index) in supply" :key="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <div class="btn-row">
                            <el-button size="small" icon="el-icon-search" type="primary" @click="onSearch">搜索</el-button>
                            <el-button size="small" type="primary" @click="onReset">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <!--        表格主体-->
        <el-table
                size="mini"
                :data="currentData"
                border
                style="width:100%"
                :cell-style="cell_style"
                :header-cell-style="{background:'#3899FF',color:'#ffffff',textAlign:'center'}"
                class="biao"
        >
            <el-table-column prop="goods_id" label="商品ID"></el-table-column>
            <el-table-column prop="goods_pic_big" label="商品首页图片" width="120">
                <template slot-scope="scope">
                    <img :src="scope.row.goods_pic_big" alt width="80" height="40"/>
                </template>
            </el-table-column>
            <el-table-column prop="historical_visit" label="访问量"></el-table-column>
            <el-table-column prop="goods_name" label="商品名称"></el-table-column>
            <el-table-column prop="goods_stock" label="库存"></el-table-column>
            <el-table-column prop="shouchu" label="售出"></el-table-column>
            <el-table-column prop="good_price" label="商品价格"></el-table-column>
            <el-table-column prop="goods_status" label="状态"></el-table-column>
            <el-table-column prop="time" label="创建时间"></el-table-column>
            <el-table-column prop="supplier_name" label="供应商"></el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="toProductDetails(scope.row.goods_id)">查看详情</el-button>
                    <el-button type="danger" size="mini" @click=" deleteProduct(scope.row.goods_id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        分页-->
        <div>
            <el-pagination
                    background
                    hide-on-single-page
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="6"
                    :pager-count="5"
                    :current-page="currentPage"
                    @current-change="changePage"
                    class="fenye"
            ></el-pagination>
        </div>
<!--        <el-button @click="ceshi">添加</el-button>-->
<!--        <div v-for="item in testData">-->
<!--            <img src="item.goodsPic1" alt="">-->
<!--        </div>-->

    </div>
</template>

<script>
    import bus from "../../bus";
    import axios from "../../tool/http";
    import api from "../../tool/api";
    import newApi from "../../tool/api"


    export default {
        name: "ProductList",
        components: {},
        data() {
            return {
                formInline: {
                    id: "",
                    name: "",
                    state: "",
                    supplier_id: ""
                },
                //商品列表
                productList: [],
                //点击的数据
                myData: "",
                //数据总条数
                total: 0,
                currentPage: 1,
                //供应商数据（假）
                supply:[],
                //
                testData:[]
            };
        },
        methods: {
            //根据条件搜索数据
            //搜索 查询 按钮
            onSearch() {
                // console.log(this.formInline);
                if (this.formInline.name==="" && this.formInline.id===""&& this.formInline.state==="" && this.formInline.supplier_id===""){
                    this.$message({
                        type: 'warning',
                        message: '请输入查询条件！'
                    });
                }else{
                    axios({
                        url:api.searchData,
                        data:this.formInline,
                        method:"post"
                    }).then(res=>{
                        // console.log(res)
                        this.productList = res.data.data;
                        this.total = this.productList.length;

                    })
                }



            },
            //重置
            onReset(){
              this.formInline.id="";
              this.formInline.name="";
              this.formInline.state="";
              this.formInline.supplier_id="";
              this.getData()

            },


            // //以下方法实现表格文字居中
            cell_style(row, column, rowIndex, columnIndex) {
                return " text-align: center";
            },
            header_style(row, rowIndex) {
                return " text-align: center";
            },
            //拿假的供应商数据
            getsupply(){
                axios({
                    url:api.supply_list,
                    method:"get",
                }).then(res=>{
                    // console.log(res)
                    this.supply=res.data

                })

            },
            //初始化拿到所有数据
            getData() {
                axios({
                    // url:api.goods_list,//后端的接口


                    // url:api.test,测试首页渲染的数据能拿到
                    url:api.goodList,//yapi数据
                    method: "get"
                }).then(res => {
                    // console.log(res);
                    this.productList = res.data.data;
                    this.total = this.productList.length;
                });
            },

            //跳转到详情
            toProductDetails(id) {
                this.$router.push(`/ProductDetails`);
                this.myData = id;
                bus.$emit("getId", this.myData);
            },
            //点击跳页数
            changePage(val) {
                this.currentPage = val;
            },


            //删除的方法
            deleteProduct(num) {
                this.currentData.length === 1 ? this.currentPage = this.currentPage - 1 : this.currentPage
                this.$confirm('确认删除该商品?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        url: api.delete_goods,
                        method: 'delete',
                        params: {id:num}
                    }).then(res => {
                        // console.log(res.data.code)
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else if (res.data.code === 400) {
                            this.$message({
                                type: 'info',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // ceshi(){
            //     let fenye = {//分页
            //         pageSize:20,
            //         currentPage:1
            //
            //     }
            //     let add= {
            //         "goodsName":"书",
            //         "goodsDescribe":"颜如玉 黄金屋 ",
            //         "goodsStatusId":2,
            //         "goodsPic1":"https://img.alicdn.com/bao/uploaded/i2/2089957948/O1CN01eor1i728aEUXNBJ1D_!!2089957948.jpg_230x230.jpg",
            //         "goodsPic2":"https://img.alicdn.com/bao/uploaded/i4/2089957948/O1CN01FhaZbe28aEW88QeFL_!!2089957948.jpg_230x230.jpg",
            //         "goodsPic3":"hhh",
            //         "goodsPic4":"lll",
            //         "goodsStandards":{
            //             "goodsPrice":3,
            //             "goodsDiscountPrice":2.5,
            //             "goodsCostPrice":2,
            //             "goodsBuyLimit":10,
            //             "goodsStock":300,
            //             "supplier":{
            //                 "supplierName": "圣地亚哥",
            //                 "supplierPhone": "美国佬"
            //             }
            //         }
            //     }
            //     let up={
            //         "goodsId":46,
            //         "goodsName":"8848钛金手机",
            //         "goodsDescribe":"牛皮得很",
            //         "goodsStatusId":2,
            //         "goodsPic1":"xxx",
            //         "goodsPic2":"zzz",
            //         "goodsPic3":"hhh",
            //         "goodsPic4":"lll",
            //         "goodsStandards":{
            //             "goodsPrice":3,
            //             "goodsDiscountPrice":2.5,
            //             "goodsCostPrice":2,
            //             "goodsBuyLimit":10,
            //             "goodsStock":300,
            //             "supplier":{
            //                 "supplierName": "string",
            //                 "supplierPhone": "string"
            //             }
            //         }
            //     }
            //     axios({
            //         url:api.fenye,
            //         method:'post',
            //         // data:{
            //         //     "goodsId":44,
            //         // }
            //         data:fenye
            //     }).then(res=>{
            //         console.log(res)
            //
            //
            //     })
            // }

        },
      created() {
        this.getData();
        this.getsupply()
      },
      mounted() {


      },

      computed: {
        currentData() {
          return this.productList.slice(
                  (this.currentPage - 1) * 6,
                  (this.currentPage - 1) * 6 + 6
          );
        }
      }
    }
</script>

<style lang="less" scoped>
    .title {
        border-bottom: 2px solid #efefef;
        text-align: left;
        padding: 10px 0;
    }

    .title_xiao {
        border-bottom: 1px solid #3899FF;
        text-align: left;
        padding: 5px;
        color: #3899FF;
        font-size: 14px;
        margin-top: 10px;
    }

    .search-box {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        height: 80px;
    }
    .search-form{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        .btn-row{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-around;
            align-items: center;
        }
    }
    .biao{
        height: 400px;
    }
    .fenye{
        width: 80%;
        margin: 0 auto;
        text-align: center;
    }
</style>